<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/header_com.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/navigation_com.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/footer_com.css">
</head>

<body>
    <!--1. the header start -->
    <header>
        <div class="header wrapper">
            <p>ベッドと美しい生活    美好宠物生活</p>
            <h1>pidan</h1>
            <input type="text" class="iconfont" placeholder="&#xe63c">
        </div>
    </header>
    <!--1. the header end -->

    <!--2. the slider start -->
    <div class="slider">
        <ul>
            <li class="on"><a href="#"><img src="./img/1.jpg" alt="" width="100%"></a>
            </li>
            <li><a href="#"><img src="./img/1.首页banner图2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./img/1.首页banner图3.jpg" alt=""></a></li>
        </ul>
        <div class="tab right"><span class="iconfont">&#xe659</span></div>
        <div class="tab left"><span class="iconfont">&#xe658</span></div>
        <ol>
            <li class="on"></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <!--2. the slider end -->

    <!--3. the navigation start -->
    <div class="navigation wrapper">
        <ul>
            <li><a href="./index.html" class="on">首页</a></li>
            <li><a href="./product.html">产品中心</a></li>
            <li><a href="./brand.html">品牌故事</a></li>
            <li><a href="./news.html">新闻中心</a></li>
            <li><a href="./special.html">special特别合作</a></li>
            <li><a href="./contract.html">联系方式</a></li>
        </ul>
    </div>
    <!--3. the navgation end -->

    <!--4. the product start-->
    <div class="product wrapper">
        <div class="title">
            <p>产品中心</p>
            <div class="cat">
                <span class="on">喵喵用</span>
            </div>
            <span>狗狗用</span>
        </div>
        <ul>
            <li>
                <img src="./img/cat1.png" alt="">
                <div class="top">
                    <p>pidan雪屋全封闭猫砂盆</p>
                    <button>立即购买</button>
                </div>
            </li>
            <li>
                <img src="./img/cat2.png" alt="">
                <div class="top">
                    <p>pidan雪屋全封闭猫砂盆</p>
                    <button>立即购买</button>
                </div>
            </li>
            <li>
                <img src="./img/cat3.png" alt="">
                <div class="top">
                    <p>pidan雪屋全封闭猫砂盆</p>
                    <button>立即购买</button>
                </div>
            </li>
            <li>
                <img src="./img/cat4.png" alt="">
                <div class="top">
                    <p>pidan雪屋全封闭猫砂盆</p>
                    <button>立即购买</button>
                </div>
            </li>
            <li>
                <img src="./img/cat5.png" alt="">
                <div class="top">
                    <p>pidan雪屋全封闭猫砂盆</p>
                    <button>立即购买</button>
                </div>
            </li>
            <li>
                <img src="./img/cat6.png" alt="">
                <div class="top">
                    <p>pidan雪屋全封闭猫砂盆</p>
                    <button>立即购买</button>
                </div>
            </li>
        </ul>
        <div class="more"><button>more</button></div>
    </div>
    <!--4. the product end-->

    <!-- the brand start-->
    <div class="full1"><img src="./img/Full1.png" alt=""></div>
    <div class="brand wrapper">
        <h3>品牌故事</h3>
        <p>pidan是一个成立于巴黎，</p>
        <p>专注为宠物设计产品的品牌。</p>
        <p>pidan秉持「充满善意、富有创造力、勇敢而稳定」 的宗旨，</p>
        <p>立志成为美好宠物生活的创造者</p>
    </div>
    <!-- the brand end-->

    <!-- the pidan start-->
    <div class="pidan wrapper">
        <div class="title"><p>新闻中心</p></div>
        <div class="middle"><img src="./img/pidan1.png" alt=""></div>
        <ul class="bottom">
            <li>
                <img src="./img/pidan2.png" alt="">
                <div><p>pidan进驻阿里巴巴速卖通，正式与西班牙...</p></div>
            </li>
            <li>
                <img src="./img/pidan3.png" alt="">
                <div><p>pidan进驻阿里巴巴速卖通，正式与西班牙...</p></div>
            </li>
        </ul>
        <div class="more"><button>more</button></div>
    </div>
    <!-- the pidan end-->


    <!-- the special start -->
    <div class="special wrapper">
        <div class="title"><p>special特别合作</p></div>
        <ul>
            <li>
                <div class="top">
                    <img src="./img/special1.png" alt="">
                    <p><button>立即购买</button></p>
                </div>
                <div class="bottom on">
                    <p>pidan x蛋黄哥联名</p>
                    <p>猫咪睡垫四季通用地垫</p>
                    <p>狗窝垫防滑垫子宠物用品</p>
                </div>
            </li>
            <li>
                <div class="bottom">
                    <p>pidan x蛋黄哥联名  </p>
                    <p>毛毡围栏抓板瓦楞纸</p>
                    <p>猫抓板磨爪器猫窝猫玩具</p>
                </div>
                <div class="top">
                    <img src="./img/special2.png" alt="">
                    <p><button>立即购买</button></p>
                </div>
                
            </li>
            <li>
                <div class="top">
                    <img src="./img/special3.png" alt="">
                    <p><button>立即购买</button></p>
                </div>
                <div class="bottom">
                    <p>pidan x蛋黄哥联名</p>
                    <p>猫咪睡垫四季通用地垫</p>
                    <p>狗窝垫防滑垫子宠物用品</p>
                </div>
            </li>
            <li>
                <div class="bottom">
                    <p>pidan x蛋黄哥联名  </p>
                    <p>三角抓板瓦楞纸猫抓板</p>
                    <p>磨爪器猫窝猫玩具</p>
                </div>
                <div class="top">
                    <img src="./img/special4.png" alt="">
                    <p><button>立即购买</button></p>
                </div>
                
            </li>
        </ul>
        <div class="more"><button>more</button></div>
    </div>
    <!-- the special end -->

    <!-- the contract start -->
    <div class="contract">
        <h3>联系我们</h3>
        <p>地址：上海市虹口区井湾路3号3543</p>
        <p>电话 : 86 400-920-0674</p>
        <p>邮箱：pidan@123.com</p>
    </div>
    <!-- the contract end -->

    <!-- the footer start -->
    <div class="footer wrapper">
        <p>沪ICP备12385496-3 sdhfnhrj©2020 Danke Co</p>
        <p>服务热线：+86 400-920-0674</p>
    </div>
    <!-- the footer end -->










</body>

</html>